<div class="login_wrapper" id="login">
    <div class="animate form login_form">
        <section class="login_content">
            <form action="javascript:void(0);">
                <h1>***管理系统登录</h1>
                <div>
                    <input type="text" class="form-control" v-model="user.userName" placeholder="Username"
                           required=""/>
                </div>
                <div>
                    <input type="password" class="form-control" v-model="user.password" placeholder="Password"
                           required=""/>
                </div>
                <div>
                    <input type="text" class="form-control" v-model="user.verificationCode" placeholder="请输入验证码"
                           style="width:70%;float:left;margin-bottom: 0;" required=""/>
                    <canvas id="code" width="100%" height="36" @click="draw"></canvas>
                </div>
                <div style="text-align: left">
                    <input type="checkbox" v-model="user.rememberMe" style="margin: 10px 0"/>&nbsp;&nbsp;Remember Me
                </div>
                <div>
                    <a class="btn btn-default submit" href="javascript:void(0);" @click="login">Log in</a>
                    <a class="reset_pass" href="#">Lost your password?</a>
                </div>

                <div class="clearfix"></div>

                <div class="separator">
                    <p class="change_link">New to site?
                        <a href="/register" class="to_register"> Create Account </a>
                    </p>

                    <div class="clearfix"></div>
                    <br/>

                    <div>
                        <h1><i class="fa fa-paw"></i> Java Spring Boot!</h1>
                        <p>Java Spring Boot! ©2021 All Rights Reserved. </p>
                    </div>
                </div>
            </form>
        </section>
    </div>
</div>
<script>
    var login = new Vue({
        el: '#login',
        data: {
            user: {
                userName: "",
                password: "",
                rememberMe: false,
                verificationCode: ""
            },
            show_num: []
        },
        mounted() {
            this.draw(this.show_num)
        },
        methods: {
            login() {
                if (this.user.userName == null || this.user.password === "") {
                    this.$message({
                        message: '用户名或密码不能为空！',
                        type: 'error'
                    });
                } else if (this.user.verificationCode !== this.show_num.join("")) {
                    this.$message({
                        message: '验证码错误！',
                        type: 'error'
                    });
                    this.draw(this.show_num);
                }
                else {
                    let self = this;
                    $.ajax({
                        url: "/api/login",
                        method: "post",
                        contentType: "application/json",
                        data: JSON.stringify(self.user),
                        success: function (res) {
                            console.log(res);
                            if (res.status === 200) {
                                self.$message({
                                    message: res.message,
                                    type: 'success'
                                });
                                window.location.href = "/common/dashboard";
                            } else {
                                self.$message({
                                    showClose: true,
                                    message: res.message,
                                    type: 'error'
                                });
                                self.draw(self.show_num);
                            }
                        },
                        error: function (err) {
                            self.$message({
                                showClose: true,
                                message: "服务器被吃啦！",
                                type: 'info'
                            });
                            self.draw(self.show_num);
                        }
                    });
                }
            },
            draw(show_num) {
                var code_width = $('#code').width();
                var code_height = $('#code').height();
                var code = document.getElementById("code");
                var context = code.getContext("2d");
                code.width = code_width;
                code.height = code_height;
                var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
                var aCode = sCode.split(",");
                var aLength = aCode.length; //获取到数组的长度

                for (var i = 0; i < 4; i++) {
                    var j = Math.floor(Math.random() * aLength);
                    var deg = Math.random() * 30 * Math.PI / 180;
                    var txt = aCode[j];
                    show_num[i] = txt.toLowerCase();
                    var x = 10 + i * 20;
                    var y = 20 + Math.random() * 8;
                    context.font = "bold 23px 微软雅黑";

                    context.translate(x, y);
                    context.rotate(deg);

                    context.fillStyle = this.randomColor();
                    context.fillText(txt, 0, 0);

                    context.rotate(-deg);
                    context.translate(-x, -y);
                }
                for (var i = 0; i <= 5; i++) { //验证码上显示线条
                    context.strokeStyle = this.randomColor();
                    context.beginPath();
                    context.moveTo(Math.random() * code_width, Math.random() * code_height);
                    context.lineTo(Math.random() * code_width, Math.random() * code_height);
                    context.stroke();
                }
                for (var i = 0; i <= 30; i++) { //验证码上显示小点
                    context.strokeStyle = this.randomColor();
                    context.beginPath();
                    var x = Math.random() * code_width;
                    var y = Math.random() * code_height;
                    context.moveTo(x, y);
                    context.lineTo(x + 1, y + 1);
                    context.stroke();
                }

            },
            randomColor() {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
            }
        }
    });
</script>